<template>
  <div class="otherHome">
    <Other-Header index="5" bgColor="#5741d9"></Other-Header>
    <div class="newsSection">
      <!-- 面包屑crumbs-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('l.home')}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">{{$t('l.other_a_82')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('l.other_a_81')}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 详情内容 -->
      <div class="newsArticle">
        <h4 class="title">{{details.title}}</h4>
        <span class="time">{{details.createTime}} {{details.author}}</span>
        <div class="newsContent">
          <!-- <img :src="details.bgPictureUrl" alt class="detail-img" /> -->
          <div class="newsArticleText" v-html="details.content"></div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.newsSection {
  width: 1200px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 160px;
}
/* 面包屑 */
.newsSection {
  /deep/.el-breadcrumb {
    width: 1200px;
    overflow: hidden;
  }
  /deep/.el-breadcrumb__inner a,
  /deep/.el-breadcrumb__inner.is-link {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, .5);
  }
  /deep/span.el-breadcrumb__item:last-child span {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #2D8DFE;
  }
}
/* 内容 */
.newsArticle {
  width: 1200px;
  background: rgba(255, 255, 255, 1);
  padding: 54px 172px 96px 174px;
  box-sizing: border-box;
  text-align: center;
  .title {
    font-size: 22px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 30px;
  }
  .time {
    display: block;
    font-size: 14px;
    font-familyA: OpenSans;
    color: rgba(51, 56, 94, 1);
    line-height: 28px;
    margin: 17px 0 34px;
  }
}
.detail-img {
  display: block;
  width: 854px;
  height: 426px;
  background: rgba(216, 216, 216, 1);
  border-radius: 6px;
}
/deep/.newsArticleText {
  text-align: left;
  margin-top: 32px;
  font-size: 16px;
  font-familyA: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 56, 94, 1);
  line-height: 28px;
  padding-bottom: 32px;
  p,span {
    font-familyA: inherit;
    font-size: inherit;
  }
}
</style>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      articleId: "",
      details: {}
    };
  },
  async created() {
    this.articleId = this.$route.params.newsId;
    this.getNewsDetail();
  },
  methods: {
    async getNewsDetail() {
      let res = await api.announcementInfo(this.articleId);
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.details = Object.assign({}, data);
      } else {
        this.$layer.msg(msg);
      }
    }
  }
};
</script>